<template>
	<view>
		<uni-nav-bar :status-bar="true" :fixed="true" color="#333333" right-icon="scan" @clickLeft="showCity" @clickRight="scan" :count="count">
			<block slot="left">
				<view class="city">
					<view class="iconfont icondingwei" style="color: #fff;font-size: 40rpx;"></view>
					<view><text class="uni-nav-bar-text">{{ city }}</text></view>
					<!-- <uni-icons type="arrowdown" color="#333333" size="22" /> -->
				</view>
			</block>
			<view class="input-view" style="background-color: #495971;opacity: 0.5;" @click="search">
				<!-- <uni-icons class="input-uni-icon" type="search" size="22" color="#fff" /> -->
				<view class="iconfont iconsousuoICO input-uni-icon" style="color: #fff;opacity: 0.5;font-size: 26rpx;"></view>
				<!-- <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm"> -->
				<view style="color: #fff;opacity: 0.5;padding-left: 16rpx;">搜一搜  案件/知识/律师</view>
			</view>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniIcons from '@/components/header-navbar/uni-icons/uni-icons.vue' 
	import uniNavBar from '@/components/header-navbar/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				// city: '北京'
			}
		},
		props: {
			city: {
				type: String,
				default: "北京"
			},
			count: {
				type: Number,
				default: 0
			}
		},
		components: {
			uniIcons,
			uniNavBar
		},
		onLoad() {
			
		},
		methods: {
			search() {
				console.log('12')
				// this.$u.toast('维护中')
				uni.navigateTo({url: '/pages/search/search'})
			},
			showCity() {
				// uni.showToast({
				// 	title: '选择城市'
				// })
			},
			scan() {
				// uni.showToast({
				// 	title: '扫码'
				// })
				this.$emit('pushMsg', 0)
				uni.navigateTo({url: '/pages/message/message-list'})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.uni-nav-bar-text {
		font-size: 28rpx;
		color: #fff;
	}
	.ding-wei {
		color: #fff;
		font-size: 40rpx;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		/* width: 160rpx;
*/
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		/* width: 500rpx;
*/
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-uni-icon {
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 28rpx;
		background-color: #f8f8f8;
	}

	.example-body {
		padding: 0;
	}
</style>
